{% extends "base.html" %}

{% block title %}{{ restaurant.name }} - 菜单{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 餐厅信息 -->
    <div class="row mb-4">
        <div class="col-md-4">
            {% if restaurant.image %}
                <img src="{{ restaurant.image.url }}" class="img-fluid rounded" alt="{{ restaurant.name }}">
            {% endif %}
        </div>
        <div class="col-md-8">
            <h2>{{ restaurant.name }}</h2>
            <p class="text-muted">{{ restaurant.description }}</p>
            <p><i class="fas fa-map-marker-alt"></i> {{ restaurant.address }}</p>
            <p><i class="fas fa-star text-warning"></i> {{ restaurant.rating }}</p>
            {% if restaurant.is_open %}
                <span class="badge bg-success">营业中</span>
            {% else %}
                <span class="badge bg-danger">休息中</span>
            {% endif %}
        </div>
    </div>

    <!-- 菜品列表 -->
    <div class="row">
        <!-- 左侧类别导航 -->
        <div class="col-md-3">
            <div class="list-group sticky-top" style="top: 20px;">
                {% for category, items in categorized_items.items %}
                    <a href="#category-{{ category }}" class="list-group-item list-group-item-action">
                        {{ category }}
                        <span class="badge bg-primary rounded-pill float-end">{{ items|length }}</span>
                    </a>
                {% endfor %}
            </div>
        </div>

        <!-- 右侧菜品展示 -->
        <div class="col-md-9">
            {% for category, items in categorized_items.items %}
                <div id="category-{{ category }}" class="mb-4">
                    <h3 class="border-bottom pb-2">{{ category }}</h3>
                    <div class="row row-cols-1 row-cols-md-2 g-4">
                        {% for item in items %}
                            <div class="col">
                                <div class="card h-100">
                                    {% if item.image %}
                                        <img src="{{ item.image.url }}" class="card-img-top" alt="{{ item.name }}">
                                    {% endif %}
                                    <div class="card-body">
                                        <h5 class="card-title">{{ item.name }}</h5>
                                        <p class="card-text">{{ item.description }}</p>
                                        <p class="card-text"><strong>¥{{ item.price }}</strong></p>
                                        <form method="post" action="{% url 'order:add_to_cart' %}" class="d-flex align-items-center">
                                            {% csrf_token %}
                                            <input type="hidden" name="menu_item_id" value="{{ item.id }}">
                                            <div class="input-group me-2" style="width: 120px;">
                                                <button type="button" class="btn btn-outline-secondary" onclick="decrementQuantity(this)">-</button>
                                                <input type="number" name="quantity" value="1" min="1" class="form-control text-center">
                                                <button type="button" class="btn btn-outline-secondary" onclick="incrementQuantity(this)">+</button>
                                            </div>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-cart-plus"></i> 加入购物车
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- 数量加减的JavaScript -->
<script>
function incrementQuantity(button) {
    const input = button.parentElement.querySelector('input[type="number"]');
    input.value = parseInt(input.value) + 1;
}

function decrementQuantity(button) {
    const input = button.parentElement.querySelector('input[type="number"]');
    const newValue = parseInt(input.value) - 1;
    if (newValue >= 1) {
        input.value = newValue;
    }
}
</script>
{% endblock %}
